<template>
	<!-- 保洁主页 -->
	<view class="cleaner_home">
		<!-- 顶部 -->
		<view class="header">
			<view class="header_felx">
				<view class="city" @tap="changeCity">
					<text class="city_text">{{ city || '暂无' }}</text>
					<image class="city_icon" src="/static/icon/arrows.png"></image>
				</view>
				<view class="salutatory">
					<image class="salutatory_img" src="/static/bg/top-help.png"></image>
				</view>
				<view class="signing">
					<image @tap="signing" class="signing_img" src="/static/icon/signing.png"></image>
				</view>
			</view>
		</view>
		<mescroll-uni :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit"
		 @emptyclick="emptyClick" @topclick="topClick">
			<!-- 轮播图 -->
			<view class="slide">
				<swiper class="slide_swiper" indicator-dots="true" indicator-color="#8fd4f9" indicator-active-color="#ffffff"
				 autoplay interval="2000" circular="true">
					<swiper-item v-for="(item, index) in banner" :key="index" @tap="slide_swiper_item(index)">
						<image :src="item"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 公告 -->
			<view class="notice">
				<view class="common">
					<view class="notice_icon">
						<image src="/static/icon/trumpet.png"></image>
					</view>
					<swiper class="notice_swiper" vertical="true" autoplay interval="3000" circular="true">
						<swiper-item class="notice_swiper_item" v-for="(item, index) in broadList" :key="index">
							<text class="notice_swiper_title">广播</text>
							<text class="notice_swiper_tem">{{ item }}</text>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 我要认证 -->
			<view class="attestation" @tap="navigateTo()" v-if="flag">
				<image src="/static/bg/go.png" mode=""></image>
			</view>

			<!-- 我的订单 -->
			<view class="order" v-if="show">
				<view class="common">
					<!-- 我的订单头部 -->
					<view class="order_title">
						<view class="title_left">
							<view class="icon"></view>
							<view class="title">我的订单</view>
						</view>
						<view class="more" @tap="order">
							<text>更多</text>
							<image class="img" src="/static/icon/arrows-r.png"></image>
						</view>
					</view>
					<!-- 我的订单主体 -->
					<view class="order_main">
						<view class="order_item">
							<view class="title">
								<view class="content">
									<image class="icon1" src="/static/icon/jiudian.png"></image>
									<view class="text">{{ myorder[0].name }}</view>
									<image class="icon2" src="/static/icon/right-333.png" mode=""></image>
								</view>
								<view class="btn1" @tap="reach(myorder[0])">我已到店</view>
							</view>
							<view class="order_box" @tap="gotoOrder(item.id)" v-for="(item, index) in myorder[0].orderData" :key="index">
								<view>{{ item.room_no }}{{ item.room_type }} {{ item.storey + '楼' }}</view>
								<view class="room">
									<view>{{ item.roomtype }}</view>
								</view>
								<view class="time">
									<view class="time_box">
										<image v-if="item.subscribe_msg" class="time_img" src="/static/icon/time-999.png" mode=""></image>
										<view v-if="item.subscribe_msg">{{ item.subscribe_msg }}</view>
									</view>
									<view class="yen">
										预计收入
										<view style="font-size: 32upx;">￥{{ item.real_amount }}</view>
									</view>
								</view>
								<view class="order_btn">
									<view class="btn3" @tap.stop="accomplish(item)">已打扫</view>
									<view class="btn2" @tap.stop="close(item)">取消订单</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 弹层 -->
			<layer v-if="layerShow">
				<view slot="text1">提示</view>
				<view slot="text2">确认{{ tishi }}么？</view>
				<view slot="btn1" @tap="layerClose">取消</view>
				<view slot="btn2" @tap="layerFinish">确定</view>
			</layer>

			<!-- 酒店入驻 -->
			<view class="joins">
				<view class="common">
					<view class="joins_title">
						<view class="icon"></view>
						<view class="title">酒店加盟入驻</view>
					</view>
					<view class="joins_box">
						<view class="content_left">
							<view>
								<view class="blue">{{hotelScale.hotelCount}}</view>
								<view>全国累计入驻酒店(家)</view>
							</view>
						</view>
						<view class="content_right">
							<view class="box1_right_item">
								<view>规模{{hotelScale.third_step.min}}间以上(家)</view>
								<view class="blue">{{hotelScale.third_step.num}}</view>
							</view>
							<view class="box1_right_item">
								<view>规模{{hotelScale.second_step.min}}-{{hotelScale.second_step.max}}间(家)</view>
								<view class="blue">{{hotelScale.second_step.num}}</view>
							</view>
							<view class="box1_right_item">
								<view>规模{{hotelScale.first_step.min}}-{{hotelScale.first_step.max}}间(家)</view>
								<view class="blue">{{hotelScale.first_step.num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 金牌保洁 -->
			<view class="cleanser">
				<view class="common">
					<view class="cleanser_title">
						<view class="icon"></view>
						<view class="title">金牌保洁</view>
					</view>
					<scroll-view scroll-x="true" class="cleanser_scroll">
						<view class="cleanser_item" v-for="(item, index) in cleanSage" :key="index">
							<image class="item_img" :src="item.head_images || '/static/bg/img.png'"></image>
							<view class="item_text">{{item.name}}</view>
							<view class="item_attention">完成{{item.order_count}}单</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!--  -->
			<view class="box">
				<view class="image" @tap="trainer">
					<image src="/static/bg/professional.png" mode=""></image>
				</view>
				<view class="_box">
					<view class="image1" @tap="service">
						<image src="/static/bg/service-process.png" mode=""></image>
					</view>
					<view class="image2" @tap="standard">
						<image src="/static/bg/standard.png" mode=""></image>
					</view>
				</view>
			</view>

			<!-- 为您推荐 -->
			<view class="recommend">
				<view class="common">
					<view class="recommend_title">
						<view class="icon"></view>
						<view class="title">为你推荐</view>
					</view>
					<view class="recommend_box" v-for="(item, index) in hotel_list" :key="index" @tap="hotel(item)">
						<image class="recommend_img" v-if="item.images[0]" :src="item.images[0] + '?imageView2/1/w/174/h/260'"></image>
						<image class="recommend_img" v-if="!item.images[0]" src="/static/bg/m.png"></image>
						<view class="recommend_item">
							<view class="item_title">{{ item.name||'暂无'}}</view>
							<view class="recommend-text">{{ item.hotel_type.name || '经济型' }}</view>
							<view class="item_adress">
								<image class="adress_img" src="/static/icon/adress.png"></image>
								<view class="adress_title">{{ item.hotel_address||"暂无" }}</view>
							</view>
							<view class="item_distance">
								<view class="distance">距您约{{item.distance||0}}km</view>
								<view class="room">完成{{ item.order_sum || 0 }}单</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import moment from 'moment';
	import layer from '@/components/layer/layer.vue';
	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
	export default {
		components: {
			MescrollUni,
			layer
		},
		data() {
			return {
				layerShow: false,
				cleanSage: [],
				tishi: '',
				broadList: [],
				hotelScale: {},
				hotel_list: [],
				name: [],
				myorder: [],
				show: false,
				banner: ['/static/bg/bg1.png'],
				flag: false,
				auth: 0,
				mescroll: null, //mescroll实例对象
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					autoShowLoading: true, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
					isLock: false, // 是否锁定下拉刷新,默认false;
					isBoth: true, // 下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认true,两者可同时触发;
					offset: 60, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
					inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
					minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
					textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
					textLoading: '正在刷新...' // 加载中的提示文本
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					isLock: false, // 是否锁定上拉加载,默认false;
					isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- END --', // 没有更多数据的提示文本
					toTop: {
						// 回到顶部按钮,需配置src才显示
						src: 'http://www.mescroll.com/img/mescroll-totop.png', // 图片路径
						offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
						duration: 300 // 回到顶部的动画时长,默认300ms
					},
					empty: {
						use: true, // 是否显示空布局
						icon: 'http://www.mescroll.com/img/mescroll-empty.png', // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						btnText: '去逛逛 >', // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效
						top: '35%', // fixed定位的top值 (完整的单位值,如 "35%"; "300upx")
						zIndex: 99 // fixed定位z-index值
					}
				}
			};
		},
		created() {
			// 获取数据
			this.hotelReq();
		},
		onUnload() {
			this.mescroll = null;
		},
		//注册滚动到底部的事件,用于上拉加载
		onReachBottom() {
			this.mescroll && this.mescroll.onReachBottom();
		},
		//注册列表滚动事件,用于下拉刷新
		onPageScroll(e) {
			this.mescroll && this.mescroll.onPageScroll(e);
		},
		methods: {
			gotoOrder(e) {
				/**
				 * 跳转订单详情
				 */
				uni.navigateTo({
					url: '/pages/cleaner/order/order-detile?id=' + e
				});
			},
			/**
			 * 蒙层返回完成
			 */
			layerFinish() {},
			/**
			 * 关闭蒙层
			 */
			layerClose() {
				this.layerShow = false;
			},
			/**
			 * 打开蒙层
			 */
			openlayer(callback) {
				this.layerShow = true;
				this.layerFinish = () => {
					this.layerClose();
					callback();
				};
			},
			hotelReq() {
				/**
				 * 获取数据
				 */
				let lat = 34.22259;
				let lng = 108.94878;
				uni.getLocation({
					type: 'wgs84',
					geocode: true
				}).then(data=>{
					let [err,res] = data;
					if(err){
						this.showToast('请打开定位后，重试！！');
					}else{
						lat = res.latitude;
						lng = res.longitude;
						// #ifdef APP-PLUS
						this.$store.state.city = res.address.city
						// #endif
					}
					return this.getReq({
						url: 'both/cleanHomePage',
						data: {
							id: this.isLogin().id,
							lat: lat,
							lng: lng
						}
					});
				}).then(res => {
					if (res[0] || res[1].data.status == 0) {
						this.showToast('服务器繁忙，请稍后重试！！！');
						return;
					}
					let data = res[1].data.data;
					if (data.auth == 0 || data.auth == 3) {
						this.flag = true;
					} else {
						this.flag = false;
					}
					this.auth = data.auth;
					this.cleanSage = data.cleanSage
					this.broadList = data.broadList;
					this.hotelScale = data.hotelScale;
					this.hotel_list = data.hotel_list;
					this.banner = data.lunbo;
					for (let i = 0; i < data.hotel_list.length; i++) {
						if (!data.hotel_list[i].head_images) break;
						data.hotel_list[i].images = JSON.parse(data.hotel_list[i].head_images);
					}
					if (data.myorder.code == 400) {
						this.show = false;
						return;
					}
					if (data.myorder[0].orderData.length >= 1) {
						data.myorder[0].orderData.forEach(v => {
							if (v.arrive_time) {
								v.subscribe_msg = '到店时间' + moment(v.arrive_time * 1000).format('YYYY-MM-DD HH:mm');
							}
				 		});
						this.myorder = data.myorder;
						this.show = true;
					}
				});
			},
			standard() {
				/**
				 * 服务准则
				 */
				uni.navigateTo({
					url: '/pages/cleaner/service/standard'
				});
			},
			trainer() {
				/**
				 * 专业培训
				 */
				uni.navigateTo({
					url: '/pages/cleaner/service/trainer'
				});
			},
			navto(item) {
				/**
				 * 订单详情
				 */
				uni.navigateTo({
					url: '/pages/cleaner/order/order-detile?id=' + item.id
				});
			},
			navigateTo() {
				/**
				 * 个人认证
				 */
				//console.log(this.auth)
				if (this.auth == 2) {
					uni.navigateTo({
						url: '/pages/user/auditor'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/user/set/attestation'
				});
			},
			hotel(e) {
				/**
				 * 酒店详情
				 */
				uni.navigateTo({
					url: '/pages/cleaner/hotel/hotel?id=' + e.id
				});
			},
			slide_swiper_item(e) {
				/**
				 * 轮播图
				 */
			},
			notice_swiper_item(e) {
				/**
				 * 公告
				 */
			},
			changeCity() {
				/**
				 * 选择城市功能
				 */
				// uni.navigateTo({
				// 	url: '/pages/city/city?'
				// });
			},
			signing() {
				/**
				 * 签到
				 */
				this.req({
						url: 'both/addMyPoints',
						method: 'POST',
						data: {
							id: this.isLogin().id,
							position: '1',
							change_type: 'signin'
						}
					},
					res => {
						if (res.data.status == 1) {
							uni.showToast({
								title: res.data.title,
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						}
					}
				);
			},
			order() {
				/**
				 * 更多订单
				 */
				uni.navigateTo({
					url: '/pages/cleaner/order/will-be-cleaned'
				});
			},
			service() {
				/**
				 * 联系客服
				 */
				uni.navigateTo({
					url: '/pages/cleaner/service/service'
				});
			},
			/**
			 * 获取当前地址
			 */
			getLocation() {
				return new Promise(res => {
					uni.getLocation({
						type: 'wgs84',
						success: function(data) {
							res(data);
							// console.log('当前位置的经度：' + res.longitude);
							// console.log('当前位置的纬度：' + res.latitude);
						}
					});
				});
			},
			async reach(e) {
				/**
				 * 我已到店
				 */
				let location = await this.getLocation();
				console.log(location);
				let formNum = this.getFlatternDistance(location.latitude, location.longitude, e.hotel_latitude * 1, e.hotel_longitude *
					1);

				if (formNum > 500) {
					uni.showToast({
						icon: 'none',
						title: '距离该酒店过远'
					});
					return;
				}
				this.getReq({
					url: 'both/arrivalHotel',
					data: {
						hotel_id: e.id,
						clean_id: this.isLogin().id
					}
				}).then(res => {
					if (res[1].data.status == 1) {
						// this.show = false
						uni.showToast({
							title: '到店成功',
							icon: 'none'
						});
						return;
					}
					uni.showToast({
						title: '您已到店',
						icon: 'none'
					});
				});
			},
			close(e) {
				/**
				 * 取消订单
				 */
				this.tishi = '取消订单';
				this.openlayer(() => {
					this.getReq({
						url: 'both/cancelOrder',
						data: {
							id: e.osid,
							uid: e.cid,
							position: 1
						}
					}).then(res => {
						if (res[1].data.status == 1) {
							if (this.myorder[0].orderData.length == 2) {
								this.myorder[0].orderData.forEach((val, index) => {
									if (val.id == e.id) {
										this.myorder[0].orderData.splice(index, 1);
									}
								});
							} else {
								this.show = false;
							}
							this.showToast(res[1].data.title);
						} else {
							this.showToast(res[1].data.message);
						}
					});
				});
			},
			accomplish(e) {
				/**
				 * 完成订单
				 */
				this.tishi = '完成订单';
				this.openlayer(() => {
					this.getReq({
						url: 'both/finishClean',
						data: {
							cid: e.cid,
							order_data: [e.osid]
						}
					}).then(res => {
						if (res[1].data.status == 1) {
							if (this.myorder[0].orderData.length == 2) {
								this.myorder[0].orderData.forEach((val, index) => {
									if (val.id == e.id) {
										this.myorder[0].orderData.splice(index, 1);
									}
								});
							} else {
								this.show = false;
							}
							this.showToast(res[1].data.title);
						} else {
							this.showToast(res[1].data.message);
						}
					});
				});
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
				console.log('下拉刷新');
				mescroll.resetUpScroll();
				this.hotelReq();
				setTimeout(() => {
					mescroll.endSuccess(10);
				}, 500);
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
				// console.log('上拉回调');
				// setTimeout(()=>{
				// 	mescroll.endSuccess(10);
				// },1500);
			},
			// 点击空布局按钮的回调
			emptyClick() {
				console.log('点击了按钮');
			},
			// 点击回到顶部按钮的回调
			topClick() {
				console.log('点击了回到顶部按钮');
			}
		},
		computed: {
			city() {
				let city = '';
				if(typeof this.$store.state.city == 'string'){
					city = this.$store.state.city
				}else if(typeof this.$store.state.city == 'object'){
					city = this.$store.state.city.SHORT_NAME
				}else{
					city = '暂无'
				}
				return city
			}
		}
	};
</script>

<style lang="scss" scoped>
	.cleaner_home {
		color: #333333;

		.header {
			height: 62upx;
			width: 100%;

			.header_felx:after {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1upx;
				content: '';
				background: rgb(229, 229, 229);
				transform: scaleY(0.5);
			}

			.header_felx {
				height: 62upx;
				width: 702upx;
				padding: 0 24upx;
				position: fixed;
				top: 0;
				/* #ifdef APP-PLUS */
				top: var(--status-bar-height);
				/* #endif */
				left: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: white;
				z-index: 5;

				.city {
					.city_text {
						font-size: 28upx;
					}

					.city_icon {
						margin-left: 6upx;
						width: 16upx;
						height: 8upx;
						transform: translate(0, -4upx);
					}
				}

				.salutatory {
					.salutatory_img {
						width: 221upx;
						height: 32upx;
						margin-top: 20upx;
					}
				}

				.signing {
					.signing_img {
						width: 40upx;
						height: 40upx;
						transform: translate(0, 6upx);
					}
				}
			}
		}

		.slide {
			width: 100%;
			height: 314upx;
			margin-top: 0;

			.slide_swiper {
				width: 100%;
				height: 314upx;

				image {
					height: 314upx;
					width: 100%;
				}
			}
		}

		.notice {
			background-color: #ffffff;
			padding: 20upx 24upx;
			width: 702upx;

			.common {
				height: 50upx;
				background-color: #e5edfe;
				display: flex;
				align-items: center;

				.notice_icon {
					image {
						width: 33upx;
						height: 30upx;
						margin-left: 24upx;
					}
				}

				.notice_swiper {
					width: 640upx;
					height: 50upx;

					.notice_swiper_item {
						font-size: 24upx;
						line-height: 50upx;
						margin-left: 8upx;
						z-index: -99;

						.notice_swiper_title {
							margin-left: 10upx;
						}

						.notice_swiper_tem {
							margin-left: 20upx;
						}
					}
				}
			}
		}

		.attestation {
			width: 750upx;
			height: 174upx;

			image {
				width: 750upx;
				height: 174upx;
			}
		}

		.order {
			.common {
				width: 702upx;
				padding: 0 24upx;

				.order_title {
					font-size: 36upx;
					padding: 30upx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: bold;

					.title_left {
						display: flex;
						align-items: center;

						.icon {
							width: 10upx;
							height: 34upx;
							margin-right: 20upx;
							background-color: #3595f9;
							border-radius: 2upx;
						}

						.title {
							font-size: 36upx;
						}
					}

					.more {
						font-size: 24upx;

						.img {
							margin-left: 6upx;
							width: 10upx;
							height: 16upx;
						}
					}
				}

				.order_main {
					font-size: 28upx;
					color: #333;

					.order_item {
						.title {
							font-weight: bold;
							width: 702upx;
							height: 60upx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.content {
								display: inline-flex;
								align-items: center;

								.icon1 {
									width: 29upx;
									height: 29upx;
									margin-right: 20upx;
								}

								.icon2 {
									width: 29upx;
									height: 29upx;
									margin-left: 24upx;
								}

								.text {
									max-width: 350upx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
							}

							.btn1 {
								margin-right: 24upx;
								width: 160upx;
								height: 60upx;
								border-radius: 8upx;
								border: solid 2upx #ffb718;
								color: #ffb718;
								text-align: center;
								line-height: 60upx;
							}
						}
					}

					.order_box {
						margin-top: 30upx;
						padding: 24upx;
						box-sizing: border-box;
						width: 702upx;
						height: 274upx;
						background-color: #ffffff;
						box-shadow: 0px 1upx 13upx 0upx rgba(0, 0, 0, 0.14);
						border-radius: 8upx;
						line-height: 1;

						.time {
							width: 654upx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 24upx;
							color: #999999;

							.time_box {
								width: 400upx;
								display: flex;
								align-items: center;

								.time_img {
									width: 24upx;
									height: 24upx;
									margin-right: 12upx;
								}
							}

							.yen {
								display: flex;
								align-items: center;
							}
						}

						.room {
							padding: 28upx 0 20upx 0;
							display: flex;
							align-items: center;
							font-size: 28upx;
							color: #999999;

							.room_img {
								width: 24upx;
								height: 24upx;
								margin-right: 12upx;
							}
						}

						.order_btn {
							display: flex;
							align-items: center;
							flex-direction: row-reverse;
							text-align: center;
							line-height: 60upx;
							padding: 30upx 0;

							.btn2 {
								width: 160upx;
								height: 60upx;
								border-radius: 8upx;
								border: solid 2upx #e5e5e5;
								color: #999999;
							}

							.btn3 {
								width: 160upx;
								height: 60upx;
								border-radius: 8upx;
								border: solid 2upx #3595f9;
								color: #3595f9;
								margin-left: 40upx;
							}
						}
					}
				}
			}
		}

		.joins {
			line-height: 1;

			.common {
				width: 702upx;
				padding: 0 24upx;

				.joins_title {
					font-size: 36upx;
					padding: 30upx 0;
					display: flex;
					font-weight: bold;
					align-items: center;

					.icon {
						width: 10upx;
						height: 34upx;
						margin-right: 20upx;
						background-color: #3595f9;
						border-radius: 2upx;
					}

					.title {
						font-size: 36upx;
					}
				}

				.joins_box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 702upx;
					height: 310upx;
					font-size: 24upx;
					color: #999999;

					.content_left {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 340upx;
						height: 310upx;
						background-color: #ffffff;
						box-shadow: 0upx 3upx 15upx 0upx rgba(0, 0, 0, 0.09);
						border-radius: 8upx;
						text-align: center;

						.blue {
							font-size: 72upx;
							margin-bottom: 24upx;
							color: #3595f9;
						}
					}

					.content_right {
						width: 340upx;
						height: 310upx;

						.box1_right_item:nth-child(1) {
							margin-top: 0;
						}

						.box1_right_item {
							padding: 0 24upx;
							height: 90upx;
							margin-top: 20upx;
							background-color: #ffffff;
							box-shadow: 0 3upx 15upx 0 rgba(0, 0, 0, 0.09);
							border-radius: 8upx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.blue {
								font-size: 40upx;
								color: #3595f9;
							}
						}
					}
				}
			}
		}

		.box {
			padding: 50upx 24upx 0 24upx;
			width: 702upx;
			display: flex;
			justify-content: space-between;
			height: 340upx;
			line-height: 1;

			._box {
				.image1 {
					image {
						width: 300upx;
						height: 180upx;
						box-shadow: 6rpx 12rpx 50rpx 2px rgba(0, 129, 255, 0.45);
					}
				}

				.image2 {
					margin-top: 18upx;

					image {
						width: 300upx;
						height: 138upx;
						box-shadow: 6rpx 12rpx 50rpx 2px rgba(253, 92, 136, 0.45);
					}
				}
			}

			.image {
				image {
					width: 380upx;
					height: 340upx;
					border-radius: 8upx;
					box-shadow: 6rpx 12rpx 50rpx 2px rgba(251, 189, 8, 0.45);
				}
			}
		}

		.cleanser {
			.common {
				width: 750upx;
				height: 440upx;
				white-space: nowrap;

				.cleanser_title {
					font-size: 36upx;
					padding: 50upx 24upx 30upx 24upx;
					display: flex;
					font-weight: bold;
					align-items: center;

					.icon {
						width: 10upx;
						height: 34upx;
						margin-right: 20upx;
						background-color: #3595f9;
						border-radius: 2upx;
					}

					.title {
						font-size: 36upx;
					}
				}

				.cleanser_scroll {
					width: 750upx;
					height: 316upx;

					.cleanser_item {
						display: inline-block;
						transform: translate(0, 4upx);
						margin-left: 24upx;
						width: 200upx;
						height: 306upx;
						background-color: #ffffff;
						box-shadow: 0upx 2upx 15upx 0upx rgba(0, 0, 0, 0.12);
						border-radius: 8upx;
						text-align: center;
						z-index: 99;

						.item_img {
							margin-top: 32upx;
							width: 130upx;
							height: 130upx;
							border-radius: 50%;
							font-weight: bold;
						}

						.item_text {
							font-size: 28upx;
							color: #333;
							line-height: 72upx;
						}

						.item_attention {
							color: #999;
							text-align: center;
							font-size: 24upx;
						}
					}
				}
			}
		}

		.recommend {
			margin: 0;

			.common {
				width: 702upx;
				padding: 0 24upx;

				.recommend_title {
					font-size: 36upx;
					padding: 50upx 0 30upx 0;
					display: flex;
					font-weight: bold;
					align-items: center;

					.icon {
						width: 10upx;
						height: 34upx;
						margin-right: 20upx;
						background-color: #3595f9;
						border-radius: 2upx;
					}

					.title {
						font-size: 36upx;
					}
				}

				.recommend_box {
					width: 100%;
					height: 260upx;
					background-color: #ffffff;
					box-shadow: 0upx 2upx 18upx 0px rgba(0, 0, 0, 0.1);
					border-radius: 8upx;
					margin-bottom: 30upx;
					display: flex;

					.recommend_img {
						width: 174upx;
						height: 100%;
						border-radius: 8upx 0px 0px 8upx;
					}

					.recommend_item {
						width: 498upx;
						height: 200upx;
						line-height: 1;
						padding: 30upx;
						color: #999999;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.item_title {
							font-size: 32upx;
							font-weight: bold;
							color: #333;
						}

						.recommend-text {
							font-size: 24upx;
						}

						.item_adress {
							display: flex;
							align-items: center;

							.adress_title {
								width: 400upx;
								font-size: 28upx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.adress_img {
								width: 26upx;
								height: 26upx;
								margin-right: 8upx;
							}
						}

						.item_distance {
							font-size: 24upx;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;

							.distance {
								font-size: 24upx;
								color: #999;
							}
						}
					}
				}
			}
		}
	}
</style>
